<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }

    body {
        /*                max-width: 700px;*/
        margin: 0 auto;
    }
</style>
<div id="body" class="layout">
    <div class="wrap">
        <div class="left">
            <ul class="sort-panel">
                <li class="s-text">Search events:</li>
                <li>
                    <a href="<?php echo $this->baseUrl(''); ?>">
                        <span class="first">
                            <span class="last">
                                <span class="middle">
                                    Home
                                </span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="<?php echo $this->baseUrl("message"); ?>" class="current selected">
                        <span class="first">
                            <span class="last">
                                <span class="middle">
                                    Instant Messages
                                </span>
                            </span>
                        </span>
                    </a>
                </li>
            </ul>
            <div class="cf"></div>
            <div class="page-name">
                Instant <strong>Messages</strong>
            </div>
            <div class="tabs im-tab">
                <div class="tab tab1">
                    <a href="#" class="blu">Inbox (<span class="inbox-count"><?php echo count($this->msgArr); ?></span>)</a>
                </div>
                <div class="tab tab2 inac">
                    <a href="#" class="blu">Outbox (<span class="outbox-count"><?php echo count($this->sentMsgArr); ?></span>)</a>
                </div>
                <div class="cf"></div>
            </div>

            <div class="im-content active inbox-tab">
                <div class="im-wrap" id="inbox-wrap">
                    <div id="inbox-only-messages">
                           

                    </div>



                    
                    <div id="message-pagination-inbox">
                                    <?php
                                        echo $this->paginationControl($this->paginator, 'Sliding', 'pagination/ajaxpagination.phtml', array('type_of_data' => 'message_inbox'));
                                    
                                        $this->getHelper('Event')->message('inbox');
                                        ?>
                    </div>
                </div>
            </div>
            <div class="im-content outbox-tab">
                <div class="im-wrap" id="outbox-wrap">
                    <div id="outbox-only-messages">

                    
                        
                    </div>
                    
                    <div id="message-pagination-outbox">
                                    <?php
                                        echo $this->paginationControl($this->paginator1, 'Sliding', 'pagination/ajaxpagination.phtml', array('type_of_data' => 'message_outbox'));
                                    
                                        $this->getHelper('Event')->message('outbox');
                                        ?>
                    </div>
                        
                </div>
            </div>
        </div>
        <div class="right">
            <?php
                echo $this->partial("ads.phtml", array("ads_count" => "3"));
            ?>
        </div>
        <div class="cf"></div>
    </div>
</div>

<script id="inbox-msg-tmplt" type="text/html">
    {{#messages}}
    <a href="<?php echo $this->baseUrl("ajax/readmessage/id/{{message_id}}"); ?>" class="fancybox fancybox.ajax"> 
    <div class="msg {{read}}">
    <div class="msg-left">
        
    <div class="avt"><a href="#show-profile-{{receiver_id}}" class="{{#notadmin}}show-profile-test{{/notadmin}}" ><img alt="avt" src="{{avatar}}"></a></div>

        
        
    <div class="name">{{name}}</div>
    <div class="time">{{time}}</div>
    </div>
    <div class="msg-right">
    <p>{{message}}</p>
    <p class="reply" style="display: block;"><a class="tlink blu" href="#">Send message</a></p>
    <div class="reply-box" style="display: none;">
    <div class="comment-box">
    <form class="outbox" name="myform{{message_id}}" id="myform{{message_id}}" onsubmit="return validateForm('reply',this);">
    <input name ="commbox" style="font-style: italic;" onfocus="if(this.value==this.title) this.value='';this.style.fontStyle = 'normal';" onblur="if(this.value==''){ this.value=this.title;this.style.fontStyle = 'italic';}" title="Write a comment ..." value="Write a comment ..." class="commbox">
    <input type="hidden" class="message_to" data-uid ="{{user_id}}" value="{{receiver_id}}" name="message_to">

    <a href="#" class="commentEnter">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </form>
    </div>
    </div>
    </div>
    <div class="cf"></div>
    <a class="del-icon" href="javascript:;" onclick ="deleteMessage('{{delete-link}}','{{is_inbox}}')">
    <img alt="del" src="<?php echo IMAGES_URL; ?>del-msg-icon.png">
    </a>
    </div>
    </div>     
    </a>
    {{/messages}}
    {{#nomessage}}
    <div class="msg" style="text-align:center;padding-bottom:15px;">No message found</div>
    {{/nomessage}}
    <br><br>
    
</script>

<script id="inbox-count" type="text/html">
    {{inboxCount}}
</script>
<script id="outbox-count" type="text/html">
    {{outboxCount}}
</script>



<script type="text/javascript">
    (function($) {
        $('.im-content').mask("Loading...");
        $.Mustache.options.warnOnMissingTemplates = true;
        // Loading templates embedded in the DOM. (HTML)
        $(function() {
            $.Mustache.addFromDom();
            // Render out one of the templates.
            $('#inbox-only-messages').empty().html($.Mustache.render('inbox-msg-tmplt', <?php echo $this->mustacheData; ?>));
            $('#outbox-only-messages').empty().html($.Mustache.render('inbox-msg-tmplt', <?php echo $this->omustacheData; ?>));
            $('.inbox-count').mustache('inbox-count', <?php echo $this->inboxCount; ?>, {method: 'html'});
            $('.outbox-count').mustache('outbox-count', <?php echo $this->outboxCount; ?>, {method: 'html'});
            //$.get(url, data, callback, type)
            $('.im-content').unmask();
            
        });
        
        $('.show-profile .close-button, .lytebox-overlay').live('click', function() {
            window.location.href = window.location.href.split("#")[0];
        });
    })(jQuery);
    
    
</script>
